<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单栏</title>
    <script language="JavaScript">
        function show(menu) {
            document.getElementById(menu).style.visibility="visible";
        }
        function hide() {
            document.getElementById("menu1").style.visibility="hidden";
            document.getElementById("menu2").style.visibility="hidden";
            document.getElementById("menu3").style.visibility="hidden";
        }
        
    </script>
</head>
<body>
    <table>
        <tr bgcolor="#9999FF" align="center">
            <td width="120" onmousemove="show('menu1')" onmouseout="hide()">系列课程</td>
            <td width="120" onmousemove="show('menu2')" onmouseout="hide()">教学课件</td>
            <td width="120" onmousemove="show('menu3')" onmouseout="hide()">课程大纲</td>
        </tr>
    </table>
    <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"
        style="background: #9999FF;position:absolute;left: 12px;top:38px;width:120px;
        visibility:hidden">
        <span>c++程序设计</span><br>
        <span>java程序设计</span><br>
        <span>c#程序设计</span><br>
    </div>
    <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"
         style="background: #9999FF;position:absolute;left:137px;top:38px;width:120px;
        visibility:hidden">
        <span>c++课件</span><br>
        <span>java课件</span><br>
        <span>c#课件</span><br>
    </div>
    <div id="menu3" onmousemove="show('menu3')" onmouseout="hide()"
         style="background: #9999FF;position:absolute;left:260px;top:38px;width:120px;
        visibility:hidden">
        <span>c++教学大纲</span><br>
        <span>java教学大纲</span><br>
        <span>c#教学大纲</span><br>
    </div>
</body>
</html>